<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比武</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <style>
        body {
            max-width: 800px;
            margin: 0 auto;
        }

        #box {
            width: 100%;
        }

        #ifr {
            width: 100%;
            height: 1500px;
        }

        button {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .btn-grounp button{
            width: 120px;
            font-size: 18px;
            height: 40px;
        }
        .btn-grounp button.sot{
            width: 50px;
        }
        .btn-grounp button.sot2{
            width: 30px;
            height: 30px;
        }
        .btn-grounp button.long{
            width: 170px;
        }
        .dsnone{
            display: none;
        }
        .div-fixed2{
            position: fixed;
            right: 5px;
            top:560px;
            z-index: 999;
            text-align: center;
        }
        .div-fixed2 button{
            width: 76px;
            font-size: 14px;
            height: 45px;
        }
        .btnhide1{
            display: none;
        }
        .mark{
            position: fixed;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
            background-color: rgba(0,0,0,0.5);
        }
        .dialog{
            width: 90%;
            max-width: 500px;
            height: 300px;
            background-color: #fff;
            padding: 8px;
            border-radius: 8px;
        }
        .dialog2{
            width: 90%;
            max-width: 500px;
            height: 300px;
            background-color: #fff;
            padding: 8px;
            border-radius: 8px;
        }
        .flex{
            display: flex;
        }
        .flex1{
            flex: 1;
        }
        .w20{
            width:20%;
        }
        .div1 div{
            height: 50px;
            line-height: 50px;
        }
        .div1 div input{
            height: 30px;
            line-height: 30px;
            width: 90%;
        }
        .center{
            text-align: center;
        }
        .dialog button{
            width: 120px;
            font-size: 18px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div id="dialog" class="dialog">
        <div class="flex div1">
            <div class="w20 center"></div>
            <div class="flex1 center">玩家1</div>
            <div class="flex1 center">玩家2</div>
        </div>
        <div class="flex div1">
            <div class="w20 center">攻击</div>
            <div class="flex1"><input type="number" id="gj1" value="" max="9999"/></div>
            <div class="flex1"><input type="number" id="gj2" value="" /></div>
        </div>
        <div class="flex div1">
            <div class="w20 center">防御</div>
            <div class="flex1"><input type="number" id="fy1" value="" /></div>
            <div class="flex1"><input type="number" id="fy2" value="" /></div>
        </div>
        <div class="flex div1">
            <div class="w20 center">生命</div>
            <div class="flex1"><input type="number" id="sm1" value="" /></div>
            <div class="flex1"><input type="number" id="sm2" value="" /></div>
        </div>
        <div class="flex div1">
            <div class="w20 center">敏捷</div>
            <div class="flex1"><input type="number" id="mj1" value="" /></div>
            <div class="flex1"><input type="number" id="mj2" value="" /></div>
        </div>
        <div class="flex div1">
            <div class="w20 center"></div>
            <div class="flex1 center"><button type="button" onclick="jisuan()">开始计算</button></div>
        </div>
    </div>
    <div id="dialog2" class="dialog2">
        
    </div>
    <script>
        function jisuan(){
            var gj1 = Number(document.getElementById('gj1').value);
            var gj2 = Number(document.getElementById('gj2').value);
            var fy1 = Number(document.getElementById('fy1').value);
            var fy2 = Number(document.getElementById('fy2').value);
            var sm1 = Number(document.getElementById('sm1').value);
            var sm2 = Number(document.getElementById('sm2').value);
            var sm1O = Number(document.getElementById('sm1').value);
            var sm2O = Number(document.getElementById('sm2').value);
            var mj1 = Number(document.getElementById('mj1').value);
            var mj2 = Number(document.getElementById('mj2').value);
            var listStr = [];
            var firstAtk = mj1>mj2?true:false; // 谁先攻击
            while(sm1 > 0 && sm2 > 0){
                if(firstAtk){
                    firstAtk = false;
                    var sm2j = gj1 - fy2;
                    sm2j = sm2j<=0?1:sm2j;
                    sm2 = (sm2 - sm2j);
                    listStr.unshift(`第${listStr.length+1}回合玩家1攻击玩家2，生命-${sm2j}，剩余生命：[${sm2<=0?0:sm2}/${sm2O}]`)
                    if(sm2<=0){
                        listStr.unshift('玩家1获胜')
                    }
                }else{
                    firstAtk = true;
                    var sm1j = gj2 - fy1;
                    sm1j = sm1j<=0?1:sm1j;
                    sm1 = (sm1 - sm1j);
                    listStr.unshift(`第${listStr.length+1}回合玩家2攻击玩家1，生命-${sm1j}，剩余生命：[${sm1<=0?0:sm1}/${sm1O}]`)
                    if(sm1<=0){
                        listStr.unshift('玩家2获胜')
                    }
                }
            }
            var listStrHtml = "";
            for(var i=0;i<listStr.length;i++){
                listStrHtml += listStr[i] + '<br/>'
            }
            document.getElementById('dialog2').innerHTML = listStrHtml;
        }
    </script>
</body>

</html>